<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="work_no">
                        <el-input v-model="searchForm.work_no" placeholder="工单编号"></el-input>
                    </el-form-item>
                    <el-form-item prop="openid">
                        <el-input v-model="searchForm.openid" placeholder="openid"></el-input>
                    </el-form-item>
                    <el-form-item prop="date">
                        <el-date-picker
                            v-model="searchForm.date"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="exportWork">导出所有工单</el-button>
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                height="10"
                class="page_body_table"
                :data="common.tableData"
                v-loading="common.loading"
                border
                stripe
                style="width: 100%">
                <el-table-column prop="settlement_id" width="80" label="编号"></el-table-column>
                <el-table-column label="工单编号">
                    <template slot-scope="scope">
                        <el-button type="text" @click="$refs.workDetail.init(scope.row.work_id)">{{scope.row.work_no}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="微信昵称"></el-table-column>
                <el-table-column prop="openid" label="openid"></el-table-column>
                <el-table-column prop="total_price" width="100" label="总金额"></el-table-column>
                <el-table-column prop="payment_price" width="100" label="红包金额"></el-table-column>
                <el-table-column prop="service_price" width="100" label="服务费"></el-table-column>
                <el-table-column prop="created_at" label="结算时间"></el-table-column>
                <el-table-column prop="received" label="是否已领取">
                    <template slot-scope="scope">
                        <span v-if="scope.row.received === 0">否</span>
                        <span v-if="scope.row.received === 1">是</span>
                        <el-button type="text"  v-if="scope.row.received === 2" @click="resend(scope.row.work_id)">已退回</el-button>
                        <span v-if="scope.row.received === 3">已重发</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
        <work-detail-dialog ref="workDetail" @refresh="$store.dispatch('tableReload')"></work-detail-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Pagination from "../Pagination";
    import WorkDetailDialog from "../laifei/Dialog/WorkDetailDialog";
    import Work from "../laifei/Work";
    export default {
        name: "SettlementExplore",
        computed:{
            ...mapState(['common','laifei']),
        },
        components:{
            Work,
            Pagination,
            WorkDetailDialog,
        },
        data(){
            return{
                method:'post',
                url:'/api/laifei/settlement/explore',
                searchForm:{
                    work_no:'',
                    openid:'',
                    date:[],
                },
            }
        },
        created() {
            this.$store.dispatch('pageInit', this);
        },
        methods:{
            // 重发
            resend(work_id){
                this.$confirm('将给这位达人进行补发红包, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.post('/api/laifei/work/settlement/resend', {work_id: work_id}).then(result => {
                        if (result.code === 0) {
                            this.$message.success(result.msg);
                            this.$store.dispatch('tableReload');
                        } else {
                            this.$message.error(result.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            exportWork(){
                let that = this;
                this.$confirm('此操作将导出所有工单数据，与筛选条件无关', '提示', {
                    confirmButtonText: '继续',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在查询',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios({
                        method: 'post',
                        url: '/api/laifei/settlement/export',
                        responseType: 'blob',
                    }).then(result=>{
                        loading.close();
                        const loading2 = this.$loading({
                            lock: true,
                            text: '正在下载',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        if(result.headers['content-disposition']){
                            console.log(result);
                            // 创建DOM修改文件名
                            let a = document.createElement("a");
                            // 从content-disposition截取文件名
                            a.download = decodeURIComponent(result.headers['content-disposition'].slice(21));
                            // 将blob转换为本地文件
                            let blob = new Blob([result.data],{type:"application/vnd.ms-excel"});
                            a.href = window.URL.createObjectURL(blob);
                            // 点击下载
                            a.click();
                            loading2.close();
                            that.$message.success('导出成功');
                        } else {
                            loading2.close();
                            that.$message.error('导出失败');
                        }
                    }).catch(e=>{
                        console.log(e);
                        loading.close();
                        loading2.close();
                        that.$message.error('导出失败');
                    });
                })
            }
        }
    }
</script>

<style scoped>

</style>
